import { save } from "@/utils/Storage";
import AntDesign from "@expo/vector-icons/AntDesign";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import {
  Dimensions,
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
const { width: SCREEN_WIDTH } = Dimensions.get("window");
type Props = {
  categoryList: Category[];
  onCategoryListChange: (categoryList: Category[]) => void;
};
// eslint-disable-next-line react/display-name
export default forwardRef(
  ({ categoryList, onCategoryListChange }: Props, ref) => {
    const [visible, setVisible] = useState(false);
    const [edit, setEdit] = useState<boolean>(false);
    const [myList, setMyList] = useState<Category[]>([]);
    const [otherList, setOtherList] = useState<Category[]>([]);
    useEffect(() => {
      if (!categoryList) {
        return;
      }
      const list1 = categoryList.filter((i) => i.isAdd);
      const list2 = categoryList.filter((i) => !i.isAdd);
      setMyList(list1);
      setOtherList(list2);
    }, [categoryList]);
    const hide = () => {
      setVisible(false);
    };
    const saveChanges = () => {
      const newCategoryList = [...myList, ...otherList];
      save("categoryList", JSON.stringify(newCategoryList));
      onCategoryListChange(newCategoryList);
    };
    const show = () => {
      setVisible(true);
    };
    const delItem = (item: Category) => {
      const newMyList = myList.filter((i) => i.name !== item.name);
      const item_copy = { ...item, isAdd: false };
      const newOtherList = [...otherList, item_copy];
      setMyList(newMyList);
      setOtherList(newOtherList);
    };
    const addItem = (item: Category) => {
      if (!edit) {
        return;
      }
      const newOtherList = otherList.filter((i) => i.name !== item.name);
      const item_copy = { ...item, isAdd: true };
      const newMyList = [...myList, item_copy];
      setMyList(newMyList);
      setOtherList(newOtherList);
    };
    // 暴露方法给父组件
    useImperativeHandle(ref, () => ({
      show,
    }));
    return (
      <Modal
        animationType="fade"
        transparent={true}
        visible={visible}
        onRequestClose={hide}
      >
        <View style={styles.winBox}>
          <View style={styles.contentBox}>
            <View style={styles.titleBox}>
              <Text style={styles.titleTxt}>我的频道</Text>
              <Text style={styles.subTitleTxt}>
                {edit ? "点击移除频道" : "点击进入频道"}
              </Text>
              <TouchableOpacity
                style={styles.editButton}
                onPress={() => {
                  if (edit) {
                    saveChanges();
                  }
                  setEdit(!edit);
                }}
              >
                <Text style={styles.editTxt}>
                  {edit ? "完成编辑" : "进入编辑"}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => hide()}>
                <MaterialIcons
                  name="keyboard-arrow-up"
                  size={24}
                  color="black"
                />
              </TouchableOpacity>
            </View>
            <View style={styles.listBox}>
              {myList.map((item: Category, index: number) => {
                return (
                  <TouchableOpacity
                    key={`${item.name}`}
                    style={
                      item.default
                        ? styles.itemLayoutDefault
                        : styles.itemLayout
                    }
                    onPress={() => {
                      if (edit && !item.default) {
                        delItem(item);
                      }
                    }}
                  >
                    <Text style={styles.itemTxt}>{item.name}</Text>
                    {edit && !item.default && (
                      <AntDesign
                        style={styles.delIcon}
                        name="closecircle"
                        size={14}
                        color="#cecece"
                      />
                    )}
                  </TouchableOpacity>
                );
              })}
            </View>
            <View style={styles.otherBox}>
              <View style={styles.titleBox}>
                <Text style={styles.titleTxt}>推荐频道</Text>
                <Text style={styles.subTitleTxt}>点击添加频道</Text>
              </View>
              <View style={styles.listBox}>
                {otherList.map((item: Category, index: number) => {
                  return (
                    <TouchableOpacity
                      key={`${item.name}`}
                      style={
                        item.default
                          ? styles.itemLayoutDefault
                          : styles.itemLayout
                      }
                      onPress={() => {
                        addItem(item);
                      }}
                    >
                      <Text style={styles.itemTxt}> + {item.name}</Text>
                    </TouchableOpacity>
                  );
                })}
              </View>
            </View>
          </View>
          <View style={styles.bottomBox}></View>
        </View>
      </Modal>
    );
  }
);
const styles = StyleSheet.create({
  winBox: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "transparent",
  },
  contentBox: {
    marginTop: 56,
    width: "100%",
    backgroundColor: "#fff",
  },
  titleBox: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 12,
  },
  titleTxt: {
    fontSize: 16,
    color: "#333",
    fontWeight: "bold",
    marginLeft: 6,
  },
  subTitleTxt: {
    fontSize: 13,
    color: "#999",
    marginLeft: 12,
    flex: 1,
  },
  bottomBox: {
    flex: 1,
    width: "100%",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  editButton: {
    paddingHorizontal: 10,
    height: 28,
    backgroundColor: "#EEE",
    borderRadius: 14,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 6,
  },
  editTxt: {
    fontSize: 13,
  },
  listBox: {
    marginTop: 6,
    width: "100%",
    flexDirection: "row",
    flexWrap: "wrap",
  },
  itemLayout: {
    width: (SCREEN_WIDTH - 80) >> 2,
    height: 32,
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#f5f5f5",
    borderRadius: 6,
    marginLeft: 16,
    marginTop: 12,
  },
  itemLayoutDefault: {
    width: (SCREEN_WIDTH - 80) >> 2,
    height: 32,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
    borderRadius: 6,
    marginLeft: 16,
    marginTop: 12,
  },
  itemTxt: {
    fontSize: 14,
    color: "#666",
  },
  otherBox: {
    marginVertical: 30,
  },
  delIcon: {
    position: "absolute",
    right: -6,
    top: -6,
  },
});
